import 'package:flutter/material.dart';

// 场景: 将多种滚动组件组合到一个可滚动的页面中
// 比如: 将ListView和GridView组合到一个可滚动的页面中
class CustomerScrollViewWidget extends StatelessWidget {
  const CustomerScrollViewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: const Text('案例-CustomerScrollView'),
      ),
      body: CustomScrollView(
        slivers: [
          // 1. 上部分: 展示横向滚动的网络布局
          SliverToBoxAdapter(
            child: SizedBox(
              height: 200, // 设置一个合适的高度
              child: CustomScrollView(
                scrollDirection: Axis.horizontal,
                slivers: [
                  SliverGrid.builder(
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 5,
                          childAspectRatio: 4 / 3,
                        ),
                    itemCount: 100,
                    itemBuilder:
                        (BuildContext context, int index) => Container(
                          color: Colors.greenAccent,
                          alignment: Alignment.center,
                          child: Text("我学习我无敌$index"),
                        ),
                  ),
                ],
              ),
            ),
          ),
          // 设置间距
          const SliverPadding(padding: EdgeInsets.all(10)),
          // 2. 下部分: 展示纵向滚动的ListView布局
          SliverList(
            delegate: SliverChildBuilderDelegate((
              BuildContext context,
              int index,
            ) {
              return Container(
                margin: const EdgeInsets.only(bottom: 10),
                color: Colors.green,
                height: 100,
                alignment: Alignment.centerLeft,
                child: Text("我学习我无敌$index"),
              );
            }, childCount: 10),
          ),
        ],
      ),
    );
  }
}
